<template>
  <div>
    <img :src="src"
         :style="{width:imgW,height:imgH}" />
  </div>

</template>
<script>
export default {
  name: "MXCompetitionAutoImg",
  data() {
    return {
      imgW: "",
      imgH: "",
    };
  },
  props: {
    // 图片地址
    src: {
      type: String,
      default: "",
    },
  },
  mounted() {
    this.$nextTick(() => {
      this.getImgInfo();
    });
  },
  methods: {
    getImgInfo() {
      let img = new Image();
      img.src = this.src;
      const vm = this;
      img.onload = function () {
        if (img.width > img.height) {
          vm.imgW = "100%";
          vm.imgH = "auto";
        } else {
          vm.imgW = "100%";
          vm.imgH = "100%";
        }
      };
    },
  },
};
</script>
<style scoped>
</style>